<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Insert title here</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css"
	href="${ pageContext.request.contextPath }/js/css/bootstrap.css">
<script type="text/javascript"
	src="${ pageContext.request.contextPath }/js/js/jquery-1.11.1.js"></script>
<script type="text/javascript"
	src="${ pageContext.request.contextPath }/js/js/bootstrap.js"></script>
<style type="text/css">
table {
	text-align: center;
}

body {
	background-image:
		url("${ pageContext.request.contextPath }/files/beijing.jpg");
	width: 80%;
	text-align: center;
	margin: 0 auto;
}

.popover {
	min-width: 150px;
}

.error {
	border: 1px red dashed;
}

label.error {
	border: none;
	color: red;
	position: relative;
	top: 8px;
	right: -20px;
}
</style>
</head>
<body>
	<%@include file="/html/nav.html"%><br>
	<br>
	<br>
	<br>
	<c:if test="${ cre_teacher }">
		<div class="col-xs-7 col-xs-offset-2">
			<div class="alert alert-warning alert-dismissible" role="alert">
				<button type="button" class="close" data-dismiss="alert"
					aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
				<strong>OK啦!</strong> 成功添加了一位教师.
			</div>
		</div>
	</c:if>
	<br>
	<div class="col-xs-5 col-xs-offset-3">
		<div class="panel panel-success">
			<div class="panel-heading">添加教师</div>
			<div class="panel-body">
				<form class="form-horizontal" id="form" method="post"
					action="append.tch">
					<div class="form-group">
						<label for="tchName" class="control-label col-xs-3 text-right">教师姓名：</label>
						<div class="col-xs-8">
							<input type="text" id="tchName" name="tchName"
								class="form-control" placeholder="请输入2~5的教师姓名">
						</div>
					</div>
					<div class="form-group">
						<label for="phone" class="control-label col-xs-3 rext-right">电话：</label>
						<div class="col-xs-8">
							<input type="text" id="phone" name="phone" class="form-control">
						</div>
					</div>
					<div class="form-group">
						<label for="mailbox" class="control-label col-xs-3 text-right">邮箱：</label>
						<div class="col-xs-8">
							<input type="text" id="mailbox" name="mailbox"
								class="form-control">
						</div>
					</div>
					<div class="form-group">
						<label for="passWord" class="control-label col-xs-3 text-right">密码：</label>
						<div class="col-xs-8">
							<input type="password" id="passWord" name="passWord"
								class="form-control" placeholder="请输入5~15位的密码">
						</div>
					</div>

					<button id="btn" class="btn btn-primary" type="submit"
						style="margin-left: 250px">提交</button>
				</form>
			</div>
		</div>
	</div>
	<script type="text/javascript"
		src="${ pageContext.request.contextPath }/js/js/jquery.validate.min.js"></script>
	<script type="text/javascript"
		src="${ pageContext.request.contextPath }/js/js/additional-methods.min.js"></script>
	<script type="text/javascript"
		src="${ pageContext.request.contextPath }/js/js/messages_zh.min.js"></script>
	<script type="text/javascript">
		jQuery.validator
				.addMethod(
						"isEmail",
						function(value, element) {
							var tel = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
							return this.optional(element) || (tel.test(value));
						}, "邮箱格式不正确");
		$(function() {
			$('[data-toggle="popover"]').popover();
			$("form").validate({
				rules : {
					tchName : {
						required : true,
						rangelength : [ 2, 5 ]
					},
					phone : {
						required : true
					},
					mailbox : {
						required : true,
						isEmail : true
					},
					passWord : {
						required : true,
						rangelenth : [ 5, 12 ]
					},
					yzm : {
						required : true,
						remote : "/AAA/yzm.validate"
					}
				},
				messages : {
					tchName : {
						rangelength : '教师姓名位数不符合要求'
					},
					passWord : {
						rangelength : '密码位数不符合要求'
					}
				},
			});
		});
	</script>
</body>
</html>